<template>
  <div class="app-container">
    <el-timeline :reverse="true">
      <el-timeline-item v-for="(item,index) in allList" color="rgb(240,173,160)" placement="top">
        <div v-if="index===allList.length-1" slot="oneTime">
          {{item.createdTime | formatDate}}<a @click="delTimeline(index)" style="float: right;margin-left: 60px">删除</a><a @click="dialogVisible=true" style="float: right">增加</a>
        </div>
        <div v-else slot="oneTime">
          {{item.createdTime | formatDate}}<a @click="delTimeline(index)" style="float:right">删除</a>
        </div>
        <el-card>
          <h4>{{item.timelineContent}}</h4>
        </el-card>
      </el-timeline-item>

    </el-timeline>

    <el-dialog
      title="请输入内容"
      :visible.sync="dialogVisible"
      width="30%">
      <el-input
        type="textarea"
        :rows="3"
        placeholder="记录今天"
        v-model="textarea">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="addTimeline">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

  import {getTimelineList,addTimeline,delTimeline} from "@/api/timeline";
  import {parseTime} from "@/utils";

  export default {
  name: 'timelineManagement',
  filters: {
    formatDate(time) {
      return parseTime(time,'{y}-{m}-{d}')
    }
  },
  data() {
    return {
      allList: [],
      dialogVisible: false,
      textarea: '',
    }
  },
  created() {
    this.getList()//初始化数据
  },
  methods: {
    async getList() {
      const { data } = await getTimelineList()//同步等待结果,必须是data
      this.allList=data;
    },
    delTimeline(index){
      const id=this.allList[index].id;
      this.$confirm('确定要删除此时间线吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delTimeline(id).then(res=>{
          this.allList.splice(index);
          this.$message({
            type: 'success',
            message: '已删除'
          });
        })
      }).catch(()=>{
        //取消删除
      });
    },
    addTimeline(){
      const data={//需要手动data对象,后台才可以@RequestBody获取到
        content:this.textarea
      }
      addTimeline(data).then(res=>{
        this.$message({
          type: 'success',
          message: '添加成功'
        });
        this.dialogVisible=false;
        this.textarea='';
        this.allList.push(res.data)
      }).catch(err=>{
        this.dialogVisible=false;
      })
    }
  },
  computed:{
  }
}
</script>

<style lang="scss" scoped>

</style>
